<template>
  <div>
      <Table border :columns="columns" :data="list"  >
      <template #create_at={row}>
           <div class="c">{{getTime(row.create_at)}}</div>
        </template>
         <template #action={index}>
          <!-- <Button type="primary"   @click="edit(index)"> 修改</Button> -->
          <Button type="error" @click="del(index)"> 删除</Button>
        </template>
    </Table>
    <Modal v-model="modal" width="530">
        <p slot="header">
          <Icon type="edit"></Icon>
          <span>修改评价</span>
        </p>
        <div>
            <Form :model="formData" ref='formData' label-position="left" :label-width="100" :rules="ruleInline">
              <FormItem label="评价人" prop="username">
                <i-input v-model="formData.username" disabled size="large" ></i-input>
              </FormItem>
               <FormItem label="评价内容" >
                <i-input v-model="formData.content" size="large" ></i-input>
              </FormItem>
               <FormItem label="评价等级" >
                <i-input  type="number" v-model="formData.values" size="large" ></i-input>
              </FormItem>
               <FormItem label="购买套餐" >
                <i-input v-model="formData.goods" disabled size="large" ></i-input>
              </FormItem>
               <FormItem label="购买尺码" >
                <i-input v-model="formData.size" disabled size="large" ></i-input>
              </FormItem>
               <FormItem label="评价时间" >
                <i-input v-model="formData.create_at" disabled size="large" ></i-input>
              </FormItem>
            </Form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large"  @click="editAction('formData')">修改</Button>
            <Button size="large"  @click="cancel">取消</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import store from '@/vuex/store';
import { mapState, mapMutations } from 'vuex';
import Distpicker from 'v-distpicker';
export default {
  name: 'MyAddress',
  data () {
    return {
      columns: [
        {
          title: '评价人',
          key: 'username'
        },
        {
          title: '评价内容',
          key: 'content'
        },
        {
          title: '购买套餐',
          key: 'goods'
        },
        {
          title: '购买尺码',
          key: 'size'
        },
        {
          title: '评价等级(星)',
          key: 'values'
        },
        {
          title: '评论时间',
          slot: 'create_at'
        },
        {
          title: '操作',
          slot: 'action',
          width: 200
        }
      ],
      haha: [
        'static/img/goodsDetail/pack/1.jpg',
        'static/img/goodsDetail/pack/2.jpg',
        'static/img/goodsDetail/pack/3.jpg',
        'static/img/goodsDetail/pack/4.jpg',
        'static/img/goodsDetail/pack/5.jpg',
        'static/img/goodsDetail/pack/6.jpg',
        'static/img/goodsDetail/pack/7.jpg',
        'static/img/goodsDetail/pack/8.jpg',
        'static/img/goodsDetail/pack/9.jpg'

      ],
      modal: false,
      modal1: false,
      formData: {
        intro: '',
        img: '',
        price: '',
        values: '',
        create_at: '',
        size: ''
      },
      ruleInline: {
        intro: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ]
      },
      listIndex: 0,
      list: [],
      mxtime: {
        hours: 1,
        minute: 38,
        seconds: 36
      }
    };
  },
  created () {
    this.list = JSON.parse(JSON.stringify(this.userRamks));
    // this.mxtime = JSON.parse(JSON.stringify(this.seckills.deadline));
  },
  computed: {
    ...mapState(['goodsInfo', 'seckills', 'userRamks'])
  },
  methods: {
    ...mapMutations(['SET_GOODS_INFO', 'SET_PJ']),
    edit (index) {
      this.modal = true;
      this.listIndex = index;
      this.formData = this.userRamks[index];
    },
    editAction (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success('修改成功');
          this.list.remarks.detail[this.listIndex] = JSON.parse(JSON.stringify(this.formData));
          this.modal = false;
          this.SET_GOODS_INFO(this.list);
        }
      });
    },
    add0 (m) { return m < 10 ? '0' + m : m; },
    getTime (q) {
      var time = new Date(q);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
    },
    cancel () {
      this.modal = false;
    },
    del (index) {
      this.$Modal.confirm({
        title: '信息提醒',
        content: '你确定删除这条评价吗',
        onOk: () => {
          this.list.splice(index, 1);
          this.SET_PJ(this.list);
          this.$Message.success('删除成功');
        },
        onCancel: () => {
          this.$Message.info('取消删除');
        }
      });
    },
    imghand (name) {
      this.formData.img = name;
      this.list[this.listIndex].img = name;
    }
  },
  components: {
    Distpicker
  },
  store
};
</script>

<style scoped>
.address-box {
  padding: 15px;
  margin: 15px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #ccc;
}
.address-header {
  height: 35px;
  display: flex;
  justify-content: space-between;
  color: #232323;
  font-size: 18px;

}
.address-header img {
height:50px
}
.address-content {
  font-size: 14px;
}
.address-content-title {
  color: #999;
}
.address-action span{
  margin-left: 15px;
  font-size: 14px;
  color: #2d8cf0;
  cursor: pointer;
}
.imgchan{
  display:inline-block;
  padding: 5px;
  margin:5px;
  border:#fff solid 1px
}
.imgclick{
border:red solid 1px
}
</style>
